<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>销售订单</span>
      </div>
      <div class="step-content">
        <!-- 步骤1: 选择服务类型 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-menu default-active="-1" class="el-menu-vertical-demo" @select="handleFirstMenuSelect">
              <el-menu-item index="-1">
                <span slot="title">所有服务</span>
              </el-menu-item>
              <el-menu-item v-for="service in firstLevelServices" :key="service.id" :index="String(service.id)">
                <span slot="title">{{ service.firstLevelTitle }}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="18">
            <el-tabs v-model="activeSecondaryTab" @tab-click="handleSecondaryTabClick">
              <el-tab-pane label="所有二级分类" name="all-secondary"></el-tab-pane>
              <el-tab-pane v-for="tab in secondaryLevelServices" :key="tab.id" :label="tab.secondaryTitle" :name="tab.id + ''"></el-tab-pane>
            </el-tabs>
            <el-row :gutter="20" class="service-cards">
              <el-col :span="8" v-for="service in filteredThirdLevelServices" :key="service.serviceShow.id">
                <el-card :body-style="{ padding: '0px' }" class="service-card" @click.native="selectService(service)">
                  <img :src="service.serviceShow.showPictures" class="image">
                  <div style="padding: 14px;">
                    <span>{{ service.serviceShow.showTitle }}</span>
                    <div class="bottom clearfix">
                      <time class="time">{{ service.serviceShow.showIntroduce }}</time>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-empty v-if="filteredThirdLevelServices.length === 0" description="暂无服务" style="width: 100%;"></el-empty>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { listAvailableServices } from "@/api/order/saleOrders";

export default {
  name: "SaleOrdersDetail",
  data() {
    return {
      firstLevelServices: [],
      allServices: [],
      secondaryLevelServices: [],
      filteredThirdLevelServices: [],
      activeFirstMenuId: -1,
      activeSecondaryTab: 'all-secondary',
      selectedService: null
    };
  },
  created() {
    this.fetchServiceTypes();
  },
  methods: {
    fetchServiceTypes() {
      listAvailableServices({}).then(response => {
        this.allServices = response.data;
        const firstLevelMap = new Map();
        this.allServices.forEach(service => {
          if (service.servicesAll && service.servicesAll.firstLevelTitle) {
            firstLevelMap.set(service.servicesAll.id, { id: service.servicesAll.id, firstLevelTitle: service.servicesAll.firstLevelTitle });
          }
        });
        this.firstLevelServices = Array.from(firstLevelMap.values());
        this.filterServices();
      }).catch(error => {
        this.$message.error('获取服务类型失败: ' + error.message);
      });
    },
    filterServices() {
      let tempSecondaryServices = [];
      let tempThirdLevelServices = [];
      if (this.activeFirstMenuId === -1) {
        this.allServices.forEach(service => {
          if (service.servicesAll && service.servicesAll.secondaryTitle) {
            const existing = tempSecondaryServices.find(s => s.id === service.servicesAll.id);
            if (!existing) {
              tempSecondaryServices.push({ id: service.servicesAll.id, secondaryTitle: service.servicesAll.secondaryTitle });
            }
          }
          if (service.serviceShow && service.servicesAll) {
            tempThirdLevelServices.push(service);
          }
        });
      } else {
        this.allServices.filter(service =>
          service.servicesAll && (service.servicesAll.id === this.activeFirstMenuId || service.servicesAll.upOneLevelId === this.activeFirstMenuId)
        ).forEach(service => {
          if (service.servicesAll && service.servicesAll.secondaryTitle) {
            const existing = tempSecondaryServices.find(s => s.id === service.servicesAll.id);
            if (!existing) {
              tempSecondaryServices.push({ id: service.servicesAll.id, secondaryTitle: service.servicesAll.secondaryTitle });
            }
          }
          if (service.serviceShow && service.servicesAll) {
            tempThirdLevelServices.push(service);
          }
        });
      }
      this.secondaryLevelServices = tempSecondaryServices;
      if (this.activeSecondaryTab === 'all-secondary') {
        this.filteredThirdLevelServices = tempThirdLevelServices;
      } else {
        this.filteredThirdLevelServices = tempThirdLevelServices.filter(service =>
          service.servicesAll && service.servicesAll.id === parseInt(this.activeSecondaryTab)
        );
      }
    },
    handleFirstMenuSelect(key, keyPath) {
      this.activeFirstMenuId = parseInt(key);
      this.activeSecondaryTab = 'all-secondary';
      this.filterServices();
    },
    handleSecondaryTabClick(tab) {
      this.activeSecondaryTab = tab.name;
      this.filterServices();
    },
    selectService(service) {
      this.selectedService = service;
      this.$message.success('已选择服务: ' + service.serviceShow.showTitle);
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.step-content {
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
}
.el-menu-vertical-demo {
  border-right: none;
}
.service-cards {
  margin-top: 20px;
}
.service-card {
  cursor: pointer;
  margin-bottom: 20px;
}
.service-card .image {
  width: 100%;
  display: block;
  height: 150px;
  object-fit: cover;
}
.service-card .time {
  font-size: 13px;
  color: #999;
}
.service-card .bottom {
  margin-top: 13px;
  line-height: 12px;
}
</style>
